import styled from 'styled-components'
import logo from './logo.jpg'

export const HeaderWrapper=styled.div`
    width:1200px;
    height:56px;
    position:relative;
    margin: 0 auto;
`

export const Logo=styled.a`
  position:absolute;
  top:0;
  left:0;
  display:block;
  //如果width开的太大，背景图片会被铺开
  width:56px;
  height: 56px;
  //用对象的方式才能被webpack打包，不能够用字符串的方式
  background:url(${logo});
  //  在背景图片太大的情况下,包含它的标签都转不下了，用下面的这句话
  background-size: contain;
`

export const Nav=styled.div`
  width:960px;
  height:100%;
  padding:0 70px 0 0;
  border-sizing:border-box;
  margin:0 auto;
`

export const NavItem=styled.div`
line-height: 56px;
padding:0 15px;
color:#333;
font-size:17px;
  &.right{
    float: right;
  }
  &.left{
    float:left;
  }
`

export const NavSearch=styled.input`
  width:160px;
  height:38px;
  padding:0 20px;
  margin-top:9px;
  margin-left:20px;
  //如果不想被padding撑开，那就用下面的这个样式
  box-sizing:border-box;
  border:none;
  outline:none;
  border-radius:19px;
  background:#eee;
  font-size: 14px;
  //双冒号指代的是属性
  &::placeholder{
  color:#999;
  }
  &.insearch{
  width:250px;
  }
`

export const Addition=styled.div`
  position:absolute;
  right:0;
  top:0;
  height:56px;
`

export const Button=styled.div`
  float:right;
  margin-top: 9px;
  margin-right:20px;
  padding:0 10px;
  line-height: 38px;
  border-radius: 19px;
  border:1px solid #ec6149;
  font-size: 14px;
  &.reg{
  color:#ec6149;
  }
  &.writting{
  color:#fff;
  background-color: #ec6149;
  }
`

